// path 是node.js的一个核心模块，如果编辑器不支持，请altshift使编辑器支持node代码助手
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 注意，新版本的清理插件已经更改了，须用下面一种写法，否则会报 is not a constructor错误
// const CleanWebpackPlugin = require('clean-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    // 开发模式可以使得在打包时或打包后运行过程中出现错误的时候，根据source map源代码地图来追踪具体的代码错误位置
    // 注意output中如果配置了 publicPath（服务器根目录），dist就必须放在服务器中才能运行。
    mode: 'development',
    // entry: './src/index.js',
    // 定义多个源文件:如果不使用shakeTree功能，entry中多个文件包含相同模块，则会重复引入模块，这是不好的
    entry: {
        index: './src/index.js'
        /** 如果我们在output中配置了自动分片功能，就不用列出每一个入口文件了(传统的分片方式是在入口配置每一个分片配置)*/
        // print: './src/print.js',
        // another_module: './src/another-module.js'
    },
    // 指定开发模式debug选项，不同的选项提供不同的方式来追踪报错。当运行出错时，会指出源代码出现错误的具体位置
    // IDE设置：禁用 Use safe write  这个选项是指先把更改写入临时文件，当写入操作可执行时，会删掉原文件，把临时文件更名。这个会破坏开发工具的一些功能。
    devtool: 'inline-source-map',
    // 指定测试服务器文件根目录，需要在package.json中脚本配置中指定npx运行脚本：webpack-dev-server --open。open是打开浏览器。
    // 当运行测试脚本时，不会打包到dist，只会热运行网页，虽然包在内存中，但虚拟地存在设置目录中，就像真的一样。这个应用场景以及本配置文件，只适合测试环境。生产环境需另外配置
    devServer: {
        contentBase: './dist'
    },
    // npm install --save-dev express webpack-dev-middleware
    plugins: [
        // npm install --save-dev clean-webpack-plugin 安装清理dist目录插件
        new CleanWebpackPlugin(),
        // npm install --save-dev html-webpack-plugin 安装html打包插件
        new HtmlWebpackPlugin({
            title: 'Webpack getting started'
        }),
    ],
    // 输出
    output: {
        // 文件名
        // filename: 'bundle.js',
        // 定义源文件映射的输出包名
        filename: '[name].bundle.js',
        /** output中配置自动分片功能，这里配置了不在entryPoint列出的入口文件打包命名的方式 */
        chunkFilename: '[name].chunk.js',
        // 输出目录
        path: path.resolve(__dirname, 'dist'),
        // 定义这个目录，指的是服务器根路径配置，bundles被html引用时，src中不会再写成./，而只会写成/
        /** 所以，配置了这个目录后，打包文件只能在服务器中运行，而不能直接点击index.html以文件方式来运行 **/
        publicPath: '/'
    },
    // 优化打包，会自动删除重复的模块引入，同时会把重复引入的模块（本文中指lodash模块）单独打包成一个文件,其它引入的模块也会独立打包
    /** output中配置自动分片功能，以下配置就可以省了 */
    // optimization: {
    //     splitChunks: {
    //         chunks: 'all'
    //     }
    // },
    module: {
        // 文件引入规则 -- 加载器及文件类型映射。这个规则在使用import时执行调用对应的加载器进行渲染。比如以下示例：css加载时，会在html头部增加一个html样式引入标签
        /*
        * 每种加载器引入文件的处理方式都不一样，比如样式加载器，是动态地用js写到输出渲染文件中，而不增加文件，而文件加载器则是将将文件打包到输出中，并记录打包路径
        * */
        rules: [
            {
                // 使用正则表达式来指定文件类型，以下表示所有以.css结尾的文件。
                test: /\.css$/,
                use: [
                    // npm install --save-dev file-loader 安装样式加载器
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
                use: [
                    // npm install --save-dev file-loader 安装文件加载器
                    'file-loader'
                ]
            },
            // npm install --save-dev csv-loader xml-loader 安装数据加载器
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            }
        ]
    }
};
